<template>
  <view class="HeaderNavTabar">
    <view class="navbar">
      <!-- 状态栏 标题栏 合一页面头部-->
      <!-- 状态栏 时间 电量 胶囊-->
      <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }">
      </view>
      <!-- 标题栏 -->
      <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px' }">
        <text class="barLeft">
						<slot name="left"></slot>
				</text>
        <view class="title">{{ props.title }}</view>
        <view class="icon-box">
						<slot name="right"></slot>
          <!-- 搜索 -->
<!--          <svg
            width="48"
            height="48"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="svgLeft"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M31.6565 11.858C26.1892 6.39061 17.3249 6.39061 11.8576 11.858C6.39021 17.3253 6.39021 26.1896 11.8576 31.6569C17.3249 37.1243 26.1892 37.1243 31.6565 31.6569C37.1239 26.1896 37.1239 17.3253 31.6565 11.858ZM9.02913 9.02952C16.0586 2.00009 27.4555 2.00009 34.485 9.02952C41.0364 15.5809 41.4819 25.9261 35.8215 32.9935L42.9703 40.1422L40.1418 42.9706L32.9931 35.8219C25.9257 41.4823 15.5805 41.0368 9.02913 34.4854C1.99969 27.4559 1.99969 16.059 9.02913 9.02952Z"
              fill="#4E5969"
            />
          </svg> -->
          <!-- 更多 -->
   <!--       <svg
            width="48"
            height="48"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="svgRight"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2 6C2 3.79086 3.79086 2 6 2H18C20.2092 2 22 3.79088 22 6V18C22 20.2092 20.2092 22 18 22H6C3.79088 22 2 20.2092 2 18V6ZM18 6H6V18H18V6Z"
              fill="#4E5969"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2 30C2 27.7908 3.79088 26 6 26H18C20.2092 26 22 27.7908 22 30V42C22 44.2092 20.2092 46 18 46H6C3.79088 46 2 44.2092 2 42V30ZM18 30H6V42H18V30Z"
              fill="#4E5969"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M26 6C26 3.79088 27.7908 2 30 2H42C44.2092 2 46 3.79088 46 6V18C46 20.2092 44.2092 22 42 22H30C27.7908 22 26 20.2092 26 18V6ZM42 6H30V18H42V6Z"
              fill="#4E5969"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M26 28C26 26.8954 26.8954 26 28 26H44C45.1046 26 46 26.8954 46 28C46 29.1046 45.1046 30 44 30H28C26.8954 30 26 29.1046 26 28Z"
              fill="#4E5969"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M34 36C34 34.8954 34.8954 34 36 34H44C45.1046 34 46 34.8954 46 36C46 37.1046 45.1046 38 44 38H36C34.8954 38 34 37.1046 34 36Z"
              fill="#4E5969"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M26 44C26 42.8954 26.8954 42 28 42H44C45.1046 42 46 42.8954 46 44C46 45.1046 45.1046 46 44 46H28C26.8954 46 26 45.1046 26 44Z"
              fill="#4E5969"
            />
          </svg> -->
        </view>
      </view>
    </view>
    <!-- 填充区域 -->
    <view class="fill" :style="{ height: getNavBarHeight() + 'px' }"> </view>
  </view>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 引入自定义头部导航栏相关信息
import {
  getStatusBarHeight,
  getTitleBarHeight,
  getNavBarHeight,
} from '@/utils/system.js'

const props = defineProps({
  title: {
    type: String,
    require: true,
  },
})
const navBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
@import '../../static/style/variables.scss';
@import '../../static/style/common.scss';

.HeaderNavTabar {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: $z-index;
    background: $box-bg-color-white;
    box-sizing: border-box;


    .titleBar {
      padding: 0 $edition-pg;
      @include flex($align: center, $justify: space-between);

      .barLeft {
        // width: 96rpx;
      }

      .title {
        @include titleStyleBase;
      }

      .icon-box {
        // width: 96rpx;
        @include flex($align: center, $justify: space-between);
        .svgLeft {
          width: 32rpx;
          height: 32rpx;
        }

        .svgRight {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
}
</style>
